/*
* @Author: zhangQiaoJuan
* @Date: 2023-06-10 10:31:20
* @LastEditors: Yejing
* @LastEditTime: 2023-07-01 17:42:16
* @Description: 店铺主页
*/
<template>
	<view class="shops-homepage">
		<c-layout>
			<c-navigation-bar navbar-bg-color="#1B1D29" :title="$t('shop.shopHomepage')" title-color="#fff" slot="head"
				:left-icon-size="40" left-icon-color="#fff" is-right-icon>
				<!--                <template slot="center-info">-->
				<!--                    <u-tabs bg-color='transparent' inactive-color='#999CAD' active-color='#fff' font-size='36'-->
				<!--                            :list="type.data"-->
				<!--                            :is-scroll="false" :current="type.current" @change="tabsChange"></u-tabs>-->
				<!--                </template>-->
				<template slot="rightIcon">
					<bubble ref="bubble" :data='bubble.data' @bubbleLineClick='bubbleLineClick'></bubble>
				</template>
			</c-navigation-bar>
			<view class="container-box">
				<shopMessage :shopId="followUrlData.shopId"></shopMessage>
				<view v-for="(item,index) in productList" :key="index" class="product-list" v-if="productList.length">
					<lineProductCard :card="item" type="live"></lineProductCard>
				</view>
				<u-swiper height="326" indicator-pos border-radius="25" indicator-pos="bottomLeft" :list="activity"
					v-if="activity.length">
				</u-swiper>

				<scroll-view scroll-left="0" scroll-x="true" class="scroll-X">
					<view class="scroll-x-box">

						<view class="scroll-x-item" @click="clickSeckill(item)"
							:class="`tag-item ${currentTime.id === item.id?'active':''}`" v-for="item in timeList" :key="item.id">
							{{timestampToTime(Number(item.startTime))}} {{$t('shop.start')}}
						</view>
					</view>

				</scroll-view>

				<view class="card-list">
					<view :class="index == '0' ? 'card-item have-count-down' : 'card-item'" v-for="(card,index) in cardList" :key="index">

						<view class="card">
							<u-image width="100%" height="350rpx" border-radius="30rpx"
								:src="$u.file.getMedieUrl(card.images)"></u-image>
							<view class="info">
								<view class="title">{{card.name}}</view>
								<view class="tip">{{card.skuName}}</view>
								<view class="bottom-group">
									<view class="left">
										<text class="discounted-price">
											<text class="discounted-price-icon">$</text>
											{{card.seckillPrice}}
										</text>
									</view>
									<view class="">
										<u-button :custom-style="getButton" @click="goSeckillProductDetails(card)">
											{{$t('shop.getNow')}}
										</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 没有秒杀活动的页面展示 -->
			<view class="noData">
				<view class="goods-box">
					<view class="title">
						<view class="tabs-group">
							<view :class="['tab',current == 'recommendCommodities' ? 'active-tab' : '']"
								@click="currentEvent('recommendCommodities')">
								{{$t('product.recommend')}}
							</view>
							<view :class="['tab',current == 'all' ? 'active-tab' : '']" @click="currentEvent('all')">
								{{$t('classifySeckill.all')}}
							</view>
							<view :class="['tab',current == 'new' ? 'active-tab' : '']" @click="currentEvent('new')">
								{{$t('classifySeckill.newest')}}
							</view>
						</view>

						<view class="" v-if="current !== 'new' ">
							<view class="" @click="showType=true">
								{{$t('anchorConsole.category')}}
								<u-icon name="arrow-down-fill" color="rgba(51, 51, 51, 1)" size="10" v-if="!showType"></u-icon>
								<u-icon name="arrow-up-fill" color="#rgba(51, 51, 51, 1)" size="10" v-else></u-icon>
							</view>
							<u-select :confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')" v-model="showType" mode="mutil-column-auto" child-name='twos' value-name='id' label-name='name'
								:list="typeList" title='' @confirm="confirm"></u-select>
						</view>
					</view>
					<view class="reviews-main">
						<view class="tabs-group" v-if="current !== 'new' ">
							<view :class="['tab',current1 == 'synthetical' ? 'active-tab' : '']"
								@click="currentEvent_two('synthetical')">
								{{$t('storeManagement.synthetical')}}
							</view>
							<view :class="['tab',current1 == 'Sales' ? 'active-tab' : '']" style="display: flex;align-items: center;">

								<view class="" @click="currentEvent_two('Sales')">
									{{$t('storeManagement.Sales')}}
								</view>

								<view class="" style="margin-left: 8rpx;">
									<u-icon name="arrow-up" :color="sort=='SalesUp'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('Sales','SalesUp')"></u-icon>
									<u-icon name="arrow-down" :color="sort=='SalesUpDown'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('Sales','SalesUpDown')"></u-icon>
								</view>

							</view>
							<view :class="['tab',current1 == 'new' ? 'active-tab' : '']" @click="currentEvent_two('new')">
								{{$t('storeManagement.new')}}
							</view>
							<view :class="['tab',current1 == 'price' ? 'active-tab' : '']" style="display: flex;align-items: center;">

								<view class="" @click="currentEvent_two('price')">
									{{$t('storeManagement.price')}}
								</view>

								<view class="" style="margin-left: 8rpx;">
									<u-icon name="arrow-up" :color="sort=='up'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('price','up')"></u-icon>
									<u-icon name="arrow-down" :color="sort=='down'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('price','down')"></u-icon>
								</view>

							</view>
						</view>

						<productCard :details="{...item,h:280}" v-for="item in goodList" :key="item.id"
							@click="goProductDetail(item)">
						</productCard>
					</view>
				</view>

			</view>
			<shopTabbar :shopId="followUrlData.shopId" :current="0" slot="footer"></shopTabbar>
		</c-layout>
		<c-share v-model="shareShow" :data="shareData"></c-share>
	</view>
</template>

<script>
	import bubble from "@/pages/searchInfo/components/bubble.vue"
	import lineProductCard from "@/pages/searchInfo/components/productCard.vue"
	import shopTabbar from "@/pages/shop/components/tabBar.vue"
	import shopMessage from "@/pages/shop/components/shopMessage.vue";

	export default {
		components: {
			shopMessage,
			bubble,
			lineProductCard,
			shopTabbar
		},
		data() {
			return {
				// 分享
				shareShow: false,
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				current: 'recommendCommodities',
				current1: 'synthetical',
				sort: '',
				//更多
				bubble: {
					data: [{
							text: this.$t('system.share'),
							icon: 'edit-pen',
							url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit'
						},
						// {
						// 	text: this.$t('system.visitor'),
						// 	icon: 'account',
						// 	url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/visitor'
						// },
					]
				},
				type: {
					data: [{
							name: '选择'
						},
						{
							name: '产品'
						},
						{
							name: '秒杀'
						},
					],
					current: 0,
					followUrlData: {}
				},
				//商铺头像
				shopImg: require("static/images/product.png"),
				productList: [],
				activity: [],
				currentTime: '',
				timeList: [],
				cardList: [],
				goodList: [],
				typeList: [],
				showType: false,
				//按钮自定义样式
				getButton: {
					padding: '10rpx 28rpx',
					background: '#1B1D29',
					borderRadius: '25rpx',
					color: '#fff',
					fontSize: '20rpx',
					height: '50rpx',
					lineHeight: '50rpx'
				},
				timer: {},
				time: {
					h: '',
					m: '',
					s: ''
				}
			}
		},
		onLoad(val) {
			this.followUrlData = val
			console.log(val)
			this.getBannerProduct()
			//获取全部分类
			this.$u.get('/app/shopGoodsInfo/cateTwo/' + this.followUrlData.shopId).then(res => {

				this.typeList = res.data
			})


			//获取推荐
			this.$u.post(`/app/shopGoodsInfo/queryProductsBasedOnUserPreferences`, {
				"shopId": this.followUrlData.shopId,
				"sortType": 1,
				"pageSize": 999,
				"pageNum": 1
			}).then((res) => {
				this.goodList = res.data

			}, )
			this.$u.post('/app/seckillActivity/query', {
				shopId: val.shopId,
				activityLocaltion: 2
			}).then(res => {
				this.timeList = res.data
				this.currentTime = res.data[0]
				const t1 = new Date().valueOf()
				let time = t1 - Number(res.data[0].startTime)

				if (time < 0) {
					uni.setStorageSync('seckillIsStart', 0)
				} else {
					uni.setStorageSync('seckillIsStart', 1)
				}
				this.getCartListAjax(this.currentTime.id)
			})
		},
		computed: {
			shareData() {
				return {
					url: `/pages/shop/index?shopId=${this.followUrlData.shopId}`
				}
			}
		},
		methods: {
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},
			//点击更右上角更多图标
			bubbleLineClick(url, index) {
				console.log(url);
				// 当 当前点击为分享时
				if (url.icon === 'edit-pen') {
					this.shareShow = true
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
				if (index == 3) {
					this.sharePopShow = true
				}
			},
			tabsChange(index) {
				this.type.current = index
			},
			//切换tab
			currentEvent(type) {
				this.goodList = []
				this.current = type
				this.sort = ''
				let paging = {
					size: 999,
					current: 1,
					shopId: this.followUrlData.shopId
				}
				switch (this.current) {
					case 'recommendCommodities':
						this.current1 = 'synthetical'
						delete paging.new
						//获取推荐
						this.$u.post(`/app/shopGoodsInfo/queryProductsBasedOnUserPreferences`, {
							"shopId": this.followUrlData.shopId,
							"sortType": 1,
							"pageSize": 999,
							"pageNum": 1
						}).then((res) => {
							this.goodList = res.data

						}, )
						break;
					case 'all':
						this.current1 = 'Sales'
						delete paging.new
						this.getProductList(paging)
						break;
					case 'new':
						paging.new = true
						this.current1 = ''
						this.$u.post(`/app/shopGoodsInfo/queryProductsBasedOnUserPreferences`, {
							"shopId": this.followUrlData.shopId,
							"sortType": 3,
							"pageSize": 999,
							"pageNum": 1,
							new:true
						}).then((res) => {
							this.goodList = res.data
						
						}, )
						break;
					default:
						break;
				}

			},
			currentEvent_two(type, sort = 'up') {
				this.goodList = []
				this.current1 = type
				let paging = {

					shopId: this.followUrlData.shopId
				}
				switch (this.current1) {
					case 'synthetical':
						paging.sortType = 1

						break;
					case 'synthetical':
						paging.sortType = 1

						break;
					case 'Sales':
						this.sort = sort == 'up' ? 'SalesUp' : sort
						paging.sortType = this.sort == 'SalesUp' ? 5 : 2
						delete paging.new

						break;
					case 'new':
						paging.sortType = 3
						paging.new = true

						break;
					case 'price':
						this.sort = sort
						paging.sortType = this.sort == 'up' ? 7 : 4
						delete paging.new

						break;

					default:
						break;
				}
				if (this.current == 'recommendCommodities') {
					paging.pageNum = 1
					paging.pageSize = 999
					this.$u.post(`/app/shopGoodsInfo/queryProductsBasedOnUserPreferences`, paging).then((res) => {
						this.goodList = res.data

					}, )
				} else {
					paging.current = 1
					paging.size = 999
					this.getProductList(paging)
				}
			},

			confirm(e) {
				console.log(e)
				let paging = {

					shopId: this.followUrlData.shopId
				}
				this.goodList = []
				if (this.current == 'recommendCommodities') {
					paging.pageNum = 1
					paging.pageSize = 999
					paging.sortType = 1
					paging.productCategoryId = e[e.length - 1].value
					this.$u.post(`/app/shopGoodsInfo/queryProductsBasedOnUserPreferences`, paging).then((res) => {
						this.goodList = res.data

					}, )
				} else {
					paging.current = 1
					paging.size = 999

					paging.cateId = e[e.length - 1].value
					this.getProductList(paging)
				}
			},
			//获取产品
			getProductList(paging) {
				this.$u.post('/app/shopGoodsInfo/useraLLpage', paging).then(res => {
					if (res.data.records.length > 0) {
						this.goodList = [...this.goodList, ...res.data.records].filter(function(element, index, self) {
							return self.findIndex(el => el.id == element.id) === index
						})
						this.total = res.data.total
					} else {
						this.goodList = []
					}

				})
			},
			//切换
			changeTabs(index) {
				this.tabsType.current = index;
			},
			//获取轮播产品
			getBannerProduct() {
				this.$u.get('/app/shopAdvertInfo/' + this.followUrlData.shopId).then(res => {
					this.activity = res.data
				})
			},
			// 获取秒杀商品列表
			getCartListAjax(activityId) {
				this.$u.post('/app/seckillActivity/goodList', {
					activityId: activityId,
					shopId: this.followUrlData.shopId,
					size: 10,
					current: 1
				}).then(res => {
					this.cardList = res.data.records
				})
			},
			clickSeckill(item) {
				this.currentTime = item

				const t1 = new Date().valueOf()
				let time = t1 - Number(item.startTime)


				if (time < 0) {

					uni.setStorageSync('seckillIsStart', 0)
				} else {

					uni.setStorageSync('seckillIsStart', 1)
				}
				this.getCartListAjax(item.id)
			},
			// 查看秒杀商品详情
			goSeckillProductDetails(item) {
				let orderData = JSON.stringify(item);
				let newStr = orderData.replace(/%/g, '%25');
				console.log(item, newStr)
				uni.navigateTo({
					url: `/pages/seckillProductDetails/seckillProductDetails?data=` + encodeURIComponent(newStr),
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				var date = new Date(timestamp);

				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return `${h} : ${m} :${s}`;
			}
		},
		//离开页面关闭气泡
		onHide() {
			// this.$refs.bubble.moreClick()
		},

	}
</script>

<style lang="scss" scoped>
	.shops-homepage {
		font-family: PingFang SC;
		.container-box {
			padding-bottom: 20rpx;
			background-image: linear-gradient(#1B1D29 180px, #1B1D29 50px, #fff, #fff, #fff, #fff, #fff);
		}
	}

	.noData {
		border-radius: 40rpx 40rpx 0px 0px;
		background: #fff;
		min-height: 72vh;
		position: relative;
		top: -20px;

		.title {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding: 40rpx 40rpx 0;

			.tabs-group {
				display: flex;
				position: relative;

				.tab {
					color: #999CAD;
					font-size: 32rpx;
					margin-right: 40rpx;
					height: 60rpx;
					text-align: center;
				}

				.active-tab {
					color: #000;
					border-bottom: 2px solid #2934D0;
				}

				.tab-active-line {
					position: absolute;
					bottom: 0;
					width: 16rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 3rpx;
					opacity: 1;
					transform: translate(20rpx, -100%);
					transition-duration: 0.5s;
				}

				.tab-active-new {
					transform: translate(50px, -100%);
				}
			}

		}

		.reviews-main {

			.tabs-group {
				display: flex;
				position: relative;
				width: 100%;
				margin: 0 0 32rpx;
				justify-content: space-between;

				.tab {
					color: #999CAD;
					font-size: 28rpx;
					margin-right: 40rpx;
					height: 40rpx;
					text-align: center;
				}

				.active-tab {
					color: #000;
					font-weight: bold;
				}

				.tab-active-line {
					position: absolute;
					bottom: 0;
					width: 16rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 3rpx;
					opacity: 1;
					transform: translate(20rpx, -100%);
					transition-duration: 0.5s;
				}

				.tab-active-new {
					transform: translate(50px, -100%);
				}
			}

			margin:32rpx 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.product-card-container {
				width: 45%;
			}
		}

	}


	.scroll-X {
		margin: 20px 0;

		.scroll-x-box {
			display: flex;

			.scroll-x-item {
				white-space: nowrap;
				margin-right: 16rpx;
				text-align: center;
				padding: 8rpx 24rpx;
				height: 56rpx;
				background: #f6f7fb;
				border-radius: 120rpx;
				color: #1e2432;
				font-size: 26rpx;
				font-family: Helvetica;
				box-sizing: border-box;
			}

			.active {
				color: #fff;
				border: 2rpx solid #2934d0;
				box-sizing: border-box;
				background: #2934d0;
			}
		}
	}

	/deep/ .u-indicator-item-round-active {
		background-color: #2934D0;
	}

	/deep/ .layout-content {}

	.product-list {
		margin-bottom: 68rpx;
	}

	.type-time {
		margin: 76rpx 0 46rpx 0;
	}

	.card-list {

		.card-item {
			margin-bottom: 40rpx;
		}

		.have-count-down {
			background: #2934D0;
			border-radius: 15px 15px 30px 30px;
		}

		.card {
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 2rpx solid #E1E8E8;

			.info {
				height: 160rpx;
				margin: 18rpx 36rpx 32rpx 40rpx;

				.title {
					font-size: 36rpx;
					color: #000000;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.tip {
					font-size: 22rpx;
					color: #999CAD;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.bottom-group {
					display: flex;
					justify-content: space-between;
					align-items: end;
					padding-top: 30rpx;

					.get-button {
						padding: 10rpx 28rpx;
						background: #1B1D29;
						border-radius: 25rpx;
						color: #fff;
						font-size: 20rpx;
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}
		}
	}

	.discounted-price {
		color: #2934D0;
		font-size: 48rpx;

		.discounted-price-icon {
			font-size: 32rpx;
		}
	}

	.original-price {
		font-size: 26rpx;
		color: #91909A;
		text-decoration: line-through;
		padding-right: 4rpx;
	}

	.price-proportion {
		font-size: 28rpx;
		color: #F26163;
	}

	.count-down-group {
		display: flex;
		justify-content: space-between;
		height: 130rpx;
		background: #2934D0;
		border-radius: 30rpx;
		padding: 0 32rpx 0 36rpx;
		color: #FFFFFF;
		align-items: center;

		.text-group {
			height: 130rpx;
			line-height: 130rpx;
		}

		.count-down-icon {
			font-size: 40rpx;
			padding-right: 12rpx;
			vertical-align: bottom;
		}

		.count-down-text {
			font-size: 28rpx;
		}

		.time-block {


			.text {
				display: flex;

				uni-text {
					background: rgba(255, 255, 255, 0.1193);
					width: 56rpx;
					margin: 0 4rpx;
					padding-top: 8rpx;
					display: inline-block;
					text-align: center;
					border-radius: 0 0 10rpx 10rpx;
					line-height: 10rpx;
					padding-bottom: 18rpx;
				}
			}
		}

		/deep/ .uni-countdown {
			display: flex;

			.uni-countdown__splitor {
				display: none;
			}

			.uni-countdown__number {
				background: rgba(255, 255, 255, 0.1193);
				width: 56rpx !important;
				border-radius: 10rpx 10rpx 0 0 !important;
				text-align: center;
				color: #FFFFFF !important;
				font-size: 24rpx;
				padding-top: 8rpx;
				margin: 0 4rpx;
			}

			.count-down-number {
				font-size: 28rpx;
			}
		}

	}
</style>